<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>注册</title>
        <link rel="stylesheet" href="layui/css/layui.css" media="all">
        <script type="text/javascript" src="jquery/jquery-3.2.1.min.js"></script>
    </head>
    <body>
        <div class="layui-container">
            <div class="layui-row">
                <div class="layui-col-md12">&nbsp;</div>
            </div>
            <div class="layui-row layui-col-space30">
                <div class="layui-col-md5 layui-col-md-offset3">
                    <form id="loginFm" class="layui-form" action="/reg" method="POST" >
                         <input type="hidden" name="paypass" value="123456">
                         <div class="layui-form-item">
			                 <label class="layui-form-label">手机号:</label>
			                 <div class="layui-input-inline">
			                     <input id="mobile" name="mobile" autocomplete="off" required  lay-verify="required" placeholder="请输入账号" class="layui-input" type="text">
			                 </div>
			             </div>
			             <div class="layui-form-item">
			                 <label class="layui-form-label">昵称:</label>
			                 <div class="layui-input-inline">
			                     <input id="uname" name="uname" autocomplete="off" required  lay-verify="required" placeholder="请输入账号" class="layui-input" type="text">
			                 </div>
			             </div>
			             <div class="layui-form-item">
			                 <label class="layui-form-label">密码:</label>
			                 <div class="layui-input-inline">
			                     <input id="upass" name="upass" autocomplete="off" required  lay-verify="required" placeholder="请输入密码" class="layui-input" type="password">
			                 </div>
			             </div>
			              <div class="layui-form-item">
			                 <div class="layui-inline">
			                     <label class="layui-form-label">验证码</label>
			                     <div class="layui-input-inline">
			                         <table>
			                             <tbody>
			                                 <tr>
			                                     <td><input id="tcode" name="tcode" lay-verify="vcode" placeholder="请输入验证码" autocomplete="off" class="layui-input" type="text"></td>
			                                     <td><img id="validateImg" alt="点击刷新" /></td>
			                                 </tr>
			                             </tbody>
			                         </table>
			                     </div>
			                 </div>
			             </div>
			             <div class="layui-form-item">
			                 <div class="layui-inline">
			                     <label class="layui-form-label">手机验证码</label>
			                     <div class="layui-input-inline">
			                         <table>
			                             <tbody>
			                                 <tr>
			                                     <td><input id="smscode" name="smscode" lay-verify="smscode" placeholder="请输入手机验证码" autocomplete="off" class="layui-input" type="text"></td>
			                                     <td><button id="sendSms" class="layui-btn" type="button">发送短信</button></td>
			                                 </tr>
			                             </tbody>
			                         </table>
			                     </div>
			                 </div>
			             </div>
			             <div class="layui-form-item">
			                 <div class="layui-input-block">
			                     <button id="loginBtn" class="layui-btn" type="button">注册</button>
			                     <button type="reset" class="layui-btn layui-btn-primary">重置</button>
			                 </div>
			              </div>
			             
			         </form>
                </div>
            </div>
        </div>
    </body>
    <script src="layui/layui.all.js"></script>
    <script type="text/javascript">
        
        //刷新验证码
        function freshVcode(){
        	$.get('freshtcode',{'mobile':$('#mobile').val()},function(r){
        		$('#validateImg').attr('src',r.result);
            });
        }
        
        
        $(function(){
        	freshVcode();
        	
        	$('#validateImg').click(function(){freshVcode();});
        	
        	//发短信事件
        	$('#sendSms').click(function(){
        		if(0==$.trim($('#uname').val()).length||0==$.trim($('#tcode').val()).length){
        			layer.alert('请填好手机号和图形验证码');
        			return;
        		}
        		$.getJSON('sendsms',{'mobile':$('#mobile').val(),'tcode':$('#tcode').val()},function(r){
        			if(r.code>0){
        				layer.alert('发送失败');
        			}else{
        				layer.alert('发送成功');
        			}
        			
        		})
        		
        	});
        	
        	
        	//登陆事件
        	$('#loginBtn').click(function(){
        		$.post('reg',{
        			'uname':$('#uname').val(),
        			'upass':$('#upass').val(),
        			'tcode':$('#tcode').val(),
        			'mobile':$('#mobile').val(),
        			'paypass':'123456',
        			'smscode':$('#smscode').val()
        		},function(r){
        			if(r.code>0){
        				layer.alert('登陆失败');
        			}else{
        				layer.alert('登陆成功',function(){
        					window.location.href='to?page='+r.page;
        				});
        			}
        		},"json");
        	});
        	
        })
        
    </script>
</html>
